<template>
    <div>
        <el-tree :data="Menus" :props="defaultProps" @node-click="handleNodeClick" style="max-width: 600px" />
        <el-button @click="Exit" style="margin-top: 20px;">
            退出系统
        </el-button>
    </div>
</template>
  
<script lang="ts" setup>
import { GetMenus } from '@/api/login/index'
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

// 获取路由实例
const router = useRouter()
// 定义菜单数据
const Menus = ref([])

// 组件挂载时获取菜单数据
onMounted(() => {
    getMenu()
})

// 获取菜单数据
const getMenu = async () => {
    try {
        const res = await GetMenus(localStorage.getItem("roleId"))
        console.log(res.data)

        // 假设返回数据已经是符合结构的格式
        Menus.value = res.data
    } catch (error) {
        console.error("获取菜单失败:", error)
        // 可以在这里添加用户反馈，例如弹出提示
    }
}

// 处理点击节点事件
const handleNodeClick = (data: any) => {
    console.log('点击的节点:', data)
    // 如果有 url 则进行路由导航
    if (data.url) {
        router.push(data.url) // 使用 url 进行路由导航
    }
}

// 退出系统处理
const Exit = () => {
    localStorage.removeItem('IsLogin')
    localStorage.removeItem('isAuthenticated')
    router.push({ name: 'LoginView' }) // 跳转到登录页面
}

// 树形组件的属性
const defaultProps = {
    children: 'children',
    label: 'menuName'
}
</script>
  
<style scoped>
/* 你可以在这里添加样式 */
</style>